package app.itgungnir.compose.wan.business.user_square

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.items
import app.itgungnir.compose.wan.utils.LocalDataStore
import app.itgungnir.compose.wan.widgets.*
import com.google.accompanist.insets.navigationBarsPadding

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun UserSquareScreen(navController: NavController = rememberNavController(), userId: Long, userName: String) {
    val viewModel: UserSquareViewModel = viewModel(factory = UserSquareViewModelFactory(userId = userId))
    val dialogState = remember { mutableStateOf(false) }
    // UI
    val isMe = LocalDataStore.localData.userInfo.id == userId
    WanCustomScaffold(
        modifier = Modifier.navigationBarsPadding(),
        topBar = {
            SquareTopBar(navController = navController, userId = userId, userName = userName)
        },
        floatingActionButton = {
            if (isMe) {
                WanFab(icon = Icons.Filled.Add) { dialogState.value = true }
            }
        },
        loadingState = viewModel.loadingState.collectAsState(),
        loadingJob = viewModel.loadingJob,
        errorState = viewModel.errorState.collectAsState(initial = null)
    ) {
        val pagingItems = viewModel.userSquareListFlow.collectAsLazyPagingItems()
        WanPagingList(pagingItems = pagingItems) {
            items(pagingItems) { square ->
                if (isMe) {
                    MySquareItem(
                        item = square,
                        onClick = {},
                        onDelete = { viewModel.deleteSquare(square) }
                    )
                } else {
                    UserSquareItem(item = square) {}
                }
            }
        }
    }
    UserSquareDialog(dialogState = dialogState, viewModel = viewModel)
    // State observation
    val dialogDismissState = viewModel.dismissDialogState.collectAsState(initial = false)
    LaunchedEffect(key1 = dialogDismissState.value) {
        if (dialogDismissState.value) {
            dialogState.value = false
        }
    }
}

@Composable
private fun SquareTopBar(
    navController: NavController = rememberNavController(),
    userId: Long,
    userName: String
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = MaterialTheme.colors.primary)
            .padding(vertical = 5.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        WanIconButton(icon = Icons.Filled.ArrowBack) { navController.navigateUp() }
        WanAvatar(
            modifier = Modifier.size(40.dp),
            userId = userId
        )
        Spacer(modifier = Modifier.width(10.dp))
        WanHeader(
            modifier = Modifier.weight(1F),
            content = userName,
            color = MaterialTheme.colors.onPrimary
        )
    }
}

@Composable
private fun UserSquareDialog(dialogState: MutableState<Boolean>, viewModel: UserSquareViewModel) {
    if (dialogState.value) {
        Dialog(
            onDismissRequest = { dialogState.value = false },
            properties = DialogProperties(dismissOnClickOutside = false)
        ) {
            UserSquareDialogUI { title, link -> viewModel.addSquare(title, link) }
        }
    }
}
